<template>
  <!-- 二级导航栏 -->
  <div class="secondary-nav" :style="{ transform: navTransform }">
    <div class="secondary-nav-content">
      <!-- 二级导航主菜单 -->
      <div class="secondary-menu">
        <div class="secondary-menu-wrapper">
          <div
              v-for="item in secondaryMenu"
              :key="item.id"
              class="secondary-menu-item"
              :class="{ active: activeSecondaryMenu === item.id }"
              @click="handleSecondaryMenuClick(item.id)"
          >
            {{ item.title }}
          </div>
        </div>

        <!-- 移动端菜单展开按钮 -->
        <div class="mobile-menu-toggle" @click="toggleMobileMenu">
          <span class="menu-text">{{ getActiveMenuTitle() }}</span>
          <div class="arrow-icon" :class="{ expanded: isMobileMenuOpen }">
            <svg viewBox="0 0 24 24" width="16" height="16">
              <path fill="currentColor" d="M7 10l5 5 5-5z"/>
            </svg>
          </div>
        </div>
      </div>

      <!-- 移动端下拉菜单 -->
      <transition name="mobile-menu">
        <div class="mobile-dropdown" v-if="isMobileMenuOpen">
          <div
              v-for="item in secondaryMenu"
              :key="item.id"
              class="mobile-menu-item"
              :class="{ active: activeSecondaryMenu === item.id }"
              @click="handleMobileSecondaryMenuClick(item.id)"
          >
            {{ item.title }}
          </div>
        </div>
      </transition>

      <!-- 二级导航子菜单 -->
      <transition name="submenu">
        <div class="sub-secondary-menu" v-if="currentSubMenu.length">
          <div class="sub-menu-wrapper">
            <div
                v-for="item in currentSubMenu"
                :key="item.id"
                class="sub-secondary-menu-item"
                :class="{ active: activeSubSecondaryMenu === item.id }"
                @click="handleSubSecondaryMenuClick(item)"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>

  <!-- 主体内容 -->
  <main class="main-content">
    <div class="content-container">
      <router-view v-slot="{ Component, route }">
        <transition name="page-fade" mode="out-in">
          <component :is="Component" :key="route.fullPath"/>
        </transition>
      </router-view>
    </div>
  </main>

  <!-- 移动端遮罩层 -->
  <transition name="overlay">
    <div
        class="mobile-overlay"
        v-if="isMobileMenuOpen"
        @click="closeMobileMenu"
    ></div>
  </transition>
</template>

<script setup>
import { computed, ref, onMounted, onUnmounted } from 'vue'

// 滚动状态和导航栏位置
const scrollY = ref(0)
const initialOffset = 50
const maxScroll = 100
const isMobileMenuOpen = ref(false)

const navTransform = computed(() => {
  const progress = Math.min(scrollY.value / maxScroll, 1)
  const translateY = initialOffset * (1 - progress)
  return `translateY(${translateY}px)`
})

// 菜单激活状态
const activeSecondaryMenu = ref('1')
const activeSubSecondaryMenu = ref('1-1')

// 二级导航菜单
const secondaryMenu = ref([
  { id: '1', title: '实时行情' },
  { id: '2', title: '市场动态' },
  { id: '3', title: '数据中心' },
  { id: '4', title: '交易分析' },
  { id: '5', title: '指数追踪' }
])

// 子菜单配置
const subMenuConfig = {
  '1': [
    { id: '1-1', title: '主板市场' },
    { id: '1-2', title: '创新板块' },
    { id: '1-3', title: '国际板' },
    { id: '1-4', title: '期货市场' }
  ],
  '2': [
    { id: '2-1', title: '即时快讯' },
    { id: '2-2', title: '公司动态' },
    { id: '2-3', title: '市场公告' }
  ],
  '3': [
    { id: '3-1', title: '行情统计' },
    { id: '3-2', title: '资金流向' },
    { id: '3-3', title: '交易排行' },
    { id: '3-4', title: '历史数据' }
  ],
  '4': [
    { id: '4-1', title: '成交分析' },
    { id: '4-2', title: '技术指标' },
    { id: '4-3', title: '量价关系' }
  ],
  '5': [
    { id: '5-1', title: '综合指数' },
    { id: '5-2', title: '行业指数' },
    { id: '5-3', title: '概念指数' }
  ]
}

// 当前子菜单
const currentSubMenu = computed(() => {
  return subMenuConfig[activeSecondaryMenu.value] || []
})

// 获取当前激活菜单标题
const getActiveMenuTitle = () => {
  const activeMenu = secondaryMenu.value.find(item => item.id === activeSecondaryMenu.value)
  return activeMenu ? activeMenu.title : '选择菜单'
}

// 处理桌面端二级菜单点击
const handleSecondaryMenuClick = (id) => {
  activeSecondaryMenu.value = id
  const firstSubItem = currentSubMenu.value[0]
  if (firstSubItem) {
    activeSubSecondaryMenu.value = firstSubItem.id
  }
}

// 处理移动端二级菜单点击
const handleMobileSecondaryMenuClick = (id) => {
  handleSecondaryMenuClick(id)
  closeMobileMenu()
}

// 处理子菜单点击
const handleSubSecondaryMenuClick = (item) => {
  activeSubSecondaryMenu.value = item.id
  console.log(`跳转到: ${item.title}`, item.id)
}

// 移动端菜单控制
const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
  if (isMobileMenuOpen.value) {
    document.body.style.overflow = 'hidden'
  } else {
    document.body.style.overflow = ''
  }
}

const closeMobileMenu = () => {
  isMobileMenuOpen.value = false
  document.body.style.overflow = ''
}

// 处理滚动
const handleScroll = () => {
  scrollY.value = window.scrollY
}

// 处理窗口大小变化
const handleResize = () => {
  if (window.innerWidth > 768 && isMobileMenuOpen.value) {
    closeMobileMenu()
  }
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
  window.removeEventListener('resize', handleResize)
  document.body.style.overflow = ''
})
</script>

<style scoped>
/* 基础样式 */
.secondary-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  will-change: transform;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.secondary-nav-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

/* 桌面端主菜单 */
.secondary-menu {
  position: relative;
}

.secondary-menu-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.secondary-menu-wrapper::-webkit-scrollbar {
  display: none;
}

.secondary-menu-item {
  flex-shrink: 0;
  padding: 12px 24px;
  cursor: pointer;
  color: #000000;
  font-weight: 500;
  font-size: 16px;
  border-radius: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  white-space: nowrap;
  user-select: none;
  background-color: transparent;
}

.secondary-menu-item::before {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 50%;
  width: 0;
  height: 3px;
  background-color: #000000;
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-50%);
}

.secondary-menu-item:hover {
  background-color: #000000;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.secondary-menu-item.active {
  background-color: #000000;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.secondary-menu-item.active::before {
  width: 60%;
}

/* 移动端菜单切换按钮 */
.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  cursor: pointer;
  color: #000000;
  font-weight: 600;
  font-size: 18px;
  position: relative;
}

.mobile-menu-toggle::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
}

.menu-text {
  flex: 1;
}

.arrow-icon {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #000000;
}

.arrow-icon.expanded {
  transform: rotate(180deg);
}

/* 移动端下拉菜单 */
.mobile-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #ffffff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
  border-radius: 0 0 16px 16px;
}

.mobile-menu-item {
  padding: 18px 24px;
  color: #000000;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 16px;
  font-weight: 500;
  position: relative;
}

.mobile-menu-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
}

.mobile-menu-item:last-child::after {
  display: none;
}

.mobile-menu-item:hover,
.mobile-menu-item.active {
  background-color: #000000;
  color: #ffffff;
}

.mobile-menu-item.active {
  font-weight: 600;
  position: relative;
}

.mobile-menu-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 50%;
  background-color: #ffffff;
  border-radius: 0 2px 2px 0;
}

/* 遮罩层 */
.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 998;
  backdrop-filter: blur(4px);
}

/* 子菜单样式 */
.sub-secondary-menu {
  background-color: #ffffff;
  position: relative;
}

.sub-secondary-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
}

.sub-menu-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sub-menu-wrapper::-webkit-scrollbar {
  display: none;
}

.sub-secondary-menu-item {
  flex-shrink: 0;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  background-color: #ffffff;
  border-radius: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sub-secondary-menu-item:hover {
  background-color: #000000;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.sub-secondary-menu-item.active {
  background-color: #000000;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* 主体内容 */
.main-content {
  margin-top: 140px;
  min-height: calc(100vh - 140px);
  background-color: #ffffff;
}

.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
  background-color: #ffffff;
  min-height: calc(100vh - 200px);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* 动画效果 */
.mobile-menu-enter-active,
.mobile-menu-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-enter-from {
  opacity: 0;
  transform: translateY(-10px);
}

.mobile-menu-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.submenu-enter-active,
.submenu-leave-active {
  transition: all 0.3s ease;
}

.submenu-enter-from,
.submenu-leave-to {
  opacity: 0;
  max-height: 0;
}

.page-fade-enter-active,
.page-fade-leave-active {
  transition: all 0.3s ease;
}

.page-fade-enter-from,
.page-fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.overlay-enter-active,
.overlay-leave-active {
  transition: opacity 0.3s ease;
}

.overlay-enter-from,
.overlay-leave-to {
  opacity: 0;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .secondary-nav-content {
    padding: 0 20px;
  }

  .content-container {
    padding: 30px 20px;
  }
}

@media (max-width: 768px) {
  .secondary-nav-content {
    padding: 0 16px;
  }

  .secondary-menu-wrapper {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .sub-menu-wrapper {
    padding: 12px 0;
    gap: 8px;
  }

  .sub-secondary-menu-item {
    padding: 8px 16px;
    font-size: 14px;
  }

  .main-content {
    margin-top: 130px;
  }

  .content-container {
    padding: 24px 16px;
    margin: 0 8px;
  }
}

@media (max-width: 480px) {
  .secondary-nav-content {
    padding: 0 12px;
  }

  .mobile-menu-toggle {
    padding: 16px 0;
    font-size: 16px;
  }

  .mobile-menu-item {
    padding: 18px 16px;
    font-size: 15px;
  }

  .sub-menu-wrapper {
    gap: 6px;
    padding: 10px 0;
  }

  .sub-secondary-menu-item {
    padding: 6px 12px;
    font-size: 13px;
  }

  .main-content {
    margin-top: 120px;
  }

  .content-container {
    padding: 20px 12px;
    margin: 0 4px;
  }
}

/* 性能优化 */
.secondary-nav,
.mobile-dropdown,
.sub-secondary-menu {
  will-change: transform;
}

.secondary-menu-item,
.sub-secondary-menu-item,
.mobile-menu-item {
  will-change: transform;
}

/* 滚动条样式优化 */
.mobile-dropdown::-webkit-scrollbar {
  width: 6px;
}

.mobile-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.mobile-dropdown::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.mobile-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* 移除暗色模式，只保留柔和的黑白主题 */
</style>